<template>
  <el-drawer v-model="drawer" :direction="direction" @close="closeclick">
    <template #title>
      <h4>{{ title }}</h4>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
        :model="ruleForm"
      >
        <el-row v-for="(item, index) in ruleForm.stations" :key="item">
          <el-col>
            <el-form-item
              label="工位名称"
              :prop="'stations.' + index + '.stationName'"
              :rules="{
                required: true,
                message: '名称不能为空',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="item.stationName"
                clearable
                placeholder="请输工位间名称"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item
              label="位置编号"
              :prop="'stations.' + index + '.stationPosition'"
              :rules="{
                required: true,
                message: '工位位置不能为空',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="item.stationPosition"
                clearable
                placeholder="请输入隔间编号"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item
              label="拍照次数"
              :prop="'stations.' + index + '.stationPhotoCount'"
              :rules="{
                required: true,
                message: '拍照次数不能为空',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="item.stationPhotoCount"
                clearable
                placeholder="请输拍照次数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="gitAdd">+</el-button>
          <el-button @click="reduce" :disabled="ruleForm.stations.length === 1"
            >-</el-button
          >
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm(formRef)"
          >
            提交
          </el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script  setup>
import { ref, defineProps, watch, defineEmits, reactive } from 'vue'
import { addStationSave } from '@/api/station'
import { ElMessage } from 'element-plus'

const props = defineProps({
  title: {
    type: String
  },
  showDrawer: {
    type: Boolean,
    // 必传
    required: true
  },
  amendStation: {
    type: Object
  },
  AkeypanId: {
    type: String
  }
})
// 定义一个变量 接收父组件传递来的值
const tableData = reactive({})
// 侦听传递过来的数据
watch(
  () => props.amendStation,
  (value) => {
    Object.assign(tableData, value)
    // tableData = value
    // console.log(tableData)
  },
  {
    immediate: true,
    deep: true
  }
)
/**
 * 逻辑总结
 * 首先定义一个对象默认是自己想要的数组 空值 键值对的形式
 * 然后 模板里用v-for 遍历这个值
 * 每次点击 + 的时候 就 push 一个 相同的对象
 * 双向数据绑定也绑定这个对象
 */
// 开始
const ruleForm = reactive({
  stations: [
    {
      stationName: '',
      stationPosition: ''
    }
  ]
})

// 加
const gitAdd = () => {
  const arr = { stationName: '', stationPosition: '' }
  ruleForm.stations.push(arr)
}
// 减
const reduce = () => {
  ruleForm.stations.length = ruleForm.stations.length - 1
}

// 重置
const resetForma = () => {
  ruleForm.stations = [{}]
}
// 取消提交
const resetForm = () => {
  drawer.value = false
  emit('clickShow', false)
  resetForma()
}
// 结束
// console.log(props.AkeypanId)
const AkeypanId = ref('')
// 监听传递过来的 隔间id
watch(
  () => props.AkeypanId,
  (val) => {
    AkeypanId.value = val
    console.log(AkeypanId.value)
  }
)
const formRef = ref()
// 提交

const loading = ref(false)
const submitForm = (formEl) => {
  console.log(AkeypanId.value)
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      setTimeout(() => {
        loading.value = false
        // 验证通过调用修改接口
        addStationSave({
          panId: AkeypanId.value,
          stations: ruleForm.stations
        })
          .then((res) => {
            ElMessage({
              message: res.message,
              type: 'success'
            })
            emit('clickShow', false, res.code)
          })
          .catch((err) => {
            ElMessage.error(err.message)
            emit('clickShow', false)
          })
      }, 500)
    } else {
      ElMessage.error('失败')
      return false
    }
  })
}

// 抽屉的隐藏显示
const emit = defineEmits(['clickShow'])
const drawer = ref(false)
watch(
  () => props.showDrawer,
  (value) => {
    drawer.value = value
    // console.log(drawer.value)
  }
)

// 抽屉方向  rtl / ltr / ttb / btt
const direction = ref('rtl')
// 监听抽屉关闭
const closeclick = () => {
  resetForma()
  emit('clickShow', false)
}
</script>

<style lang="scss" scoped>
// :v-deep .el-form-item__content {
//   margin-left: 0 !important;
// }
</style>
